<template>
  <div class="section add-education">
    <div class="container">
      <div class="row">
        <div class="col-md-8 m-auto">
          <a class="btn btn-light" @click.prevent="$router.go(-1)">返回</a>
          <h1 class="display-4 text-center">添加教育经历</h1>
          <p class="lead text-center">你所毕业的学校, 参加的培训等</p>
          <small class="d-block pb-3">* 为必填项</small>
          <!-- 表单 -->
          <form @submit.prevent="submit">
            <TextFiled
              type="text"
              name="school"
              placeholder="* 学校或培训"
              v-model="msgInfo.school"
              :error="errors.school"
            ></TextFiled>

            <TextFiled
              type="text"
              name="degree"
              placeholder="* 学历"
              v-model="msgInfo.degree"
              :error="errors.degree"
            ></TextFiled>

            <TextFiled
              type="text"
              name="fieldofstudy"
              placeholder="专业"
              v-model="msgInfo.fieldofstudy"
              :error="errors.fieldofstudy"
            ></TextFiled>

            <h6>开始时间</h6>
            <TextFiled type="date" name="from" v-model="msgInfo.from" :error="errors.from"></TextFiled>

            <h6>结束时间</h6>
            <TextFiled
              type="date"
              name="to"
              v-model="msgInfo.to"
              :error="errors.to"
              :disabled="msgInfo.current"
            ></TextFiled>

            <div class="form-check mb-4">
              <input
                class="form-check-input"
                type="checkbox"
                name="current"
                v-model="msgInfo.current"
                id="current"
              >
              <label class="form-check-label" for="current">当前在校</label>
            </div>

            <TextArea
              placeholder="在校表现"
              name="description"
              v-model="msgInfo.description"
              :error="errors.description"
              info="说说你在学习过程的经历"
            ></TextArea>

            <input type="submit" class="btn btn-info btn-block mt-4">
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TextFiled from "./common/TextFiled";
import TextArea from "./common/TextArea";

export default {
  data() {
    return {
      msgInfo: {
        school: "",
        degree: "",
        fieldofstudy: "",
        from: "",
        to: "",
        current: false,
        description: ""
      },
      errors: ""
    };
  },
  components: {
    TextFiled,
    TextArea
  },
  methods: {
    submit() {
      //   console.log(this.msgInfo);
      this.$axios
        .post("http://localhost:5000/api/profile/education/", this.msgInfo)
        .then(res => {
          this.errors = ""; // 清空错误提示
          this.$router.push("/dashboard");
        })
        .catch(error => {
          this.errors = error.response.data;
        });
    }
  }
};
</script>

